<template>
  <div class="page-container alarm-analysis">
    <div class="box-title">告警管理 · 告警分析</div>
    <el-card shadow="none">
      <el-row :gutter="30">
        <el-col :span="8">
          <div class="box box1 f-c" style="height: 343px">
            <div class="radar-chart-top f-g f-r j-b">
              <div class="f-c j-b f-s">
                <div class="f-r">
                  <el-image style="width: 49px;height: 53px;margin-top: -12px;margin-right: 5px" :src="alarmList[2].img" />
                  <div>
                    <div class="radar-chart-top-title">今日告警次数</div>
                    <div class="radar-chart-top-value__wrap f-r">
                      <div class="radar-chart-top-value">123</div>
                      <div class="radar-chart-top-unit">个</div>
                    </div>
                  </div>
                </div>
                <div>
                  <div class="radar-chart-top__rate f-r a-c">
                    <div class="radar-chart-top__rate-name">月同比：</div>
                    <div class="radar-chart-top__rate-value">0.54分</div>
                    <div class="icon-up" />
                  </div>
                  <div class="radar-chart-top__rate f-r a-c" style="margin-bottom: 30px">
                    <div class="radar-chart-top__rate-name">日环比：</div>
                    <div class="radar-chart-top__rate-value">0.54分</div>
                    <div class="icon-down" />
                  </div>
                </div>
              </div>
              <div class="radar-chart-box f-g">
                <v-chart autoresize style="width: 100%;height: 100%;margin-left: 30px" :option="option1" />
              </div>
            </div>
            <div class="radar-chart-bottom f-r a-c j-b">
              <div class="radar-chart-bottom__text">今日未处理数</div>
              <div class="radar-chart-bottom__value">3次</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="box box1 f-c" style="height: 343px">
            <div class="radar-chart-top f-g f-r j-b">
              <div class="f-c j-b f-s">
                <div class="f-r">
                  <el-image style="width: 49px;height: 53px;margin-top: -12px;margin-right: 5px" :src="alarmList[2].img" />
                  <div>
                    <div class="radar-chart-top-title">今日告警次数</div>
                    <div class="radar-chart-top-value__wrap f-r">
                      <div class="radar-chart-top-value">123</div>
                      <div class="radar-chart-top-unit">个</div>
                    </div>
                  </div>
                </div>
                <div>
                  <div class="radar-chart-top__rate f-r a-c">
                    <div class="radar-chart-top__rate-name">本月告警  </div>
                    <div class="radar-chart-top__rate-value">64次</div>
                  </div>
                </div>
              </div>
              <div class="radar-chart-box f-g">
                <v-chart autoresize style="width: 100%;height: 100%;" :option="option2" />
              </div>
            </div>
            <div class="radar-chart-bottom f-r a-c j-b">
              <div class="radar-chart-bottom__text">未处理数</div>
              <div class="radar-chart-bottom__value">3次</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="box box1 f-c" style="height: 343px">
            <div class="radar-chart-top f-g f-r j-b">
              <div class="f-c j-b f-s">
                <div class="f-r">
                  <el-image style="width: 49px;height: 53px;margin-top: -12px;margin-right: 5px" :src="infoIcon" />
                  <div>
                    <div class="radar-chart-top-title">平均告警处理时长</div>
                    <div class="radar-chart-top-value__wrap f-r">
                      <div class="radar-chart-top-value">7.8</div>
                      <div class="radar-chart-top-unit">小时/次</div>
                    </div>
                  </div>
                </div>
                <div>
                  <div class="radar-chart-top__rate f-r a-c">
                    <div class="radar-chart-top__rate-name">本月处理时长    6.4小时/次</div>
                  </div>
                </div>
              </div>
              <div class="radar-chart-box f-g">
                <v-chart autoresize style="width: 100%;height: 100%;" :option="option3" />
              </div>
            </div>
            <div class="radar-chart-bottom f-r a-c j-b">
              <div class="radar-chart-bottom__text">今日累计处理时长</div>
              <div class="radar-chart-bottom__value">3次</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="none" style="margin: 30px 0">
      <el-row :gutter="30">
        <el-col :span="8">
          <div class="box-title">今日告警详情</div>
          <div class="box box2 f-c j-a" style="height: 313px">
            <div v-for="(item,index) in alarmList" :key="index" class="alarm-item f-r a-c">
              <el-image :src="item.img" style="width: 72px;height: 78px" />
              <div class="f-s alarm-name">{{ item.name }}</div>
              <div class="f-g alarm-value" :style="{ color: item.color }">{{ item.value }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="box-title">告警指标</div>
          <div class="box box1 f-c" style="height: 313px">
            <v-chart autoresize style="width: 100%;height: 100%;" :option="option4" />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="box-title">告警可能原因</div>
          <div class="box box1 f-c" style="height: 313px">
            <v-chart autoresize style="width: 100%;height: 100%;" :option="option4" />
          </div>
        </el-col>
      </el-row>
    </el-card>
    <div class="box-title">今日告警清单</div>
    <el-card shadow="none" style="margin: 30px 0">
      <el-table
        stripe
        :data="tableData"
      >
        <el-table-column type="index" width="80px" label="序号" />
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          align="center"
        />
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'AlarmAnalysis',
  data() {
    return {
      infoIcon: require('@/assets/alarm-analysis/2.png'),
      alarmList: [
        {
          name: '严重',
          img: require('@/assets/alarm-analysis/4.png'),
          value: 123,
          color: '#FF6060'
        },
        {
          name: '中致命',
          img: require('@/assets/alarm-analysis/3.png'),
          value: 123,
          color: '#FF961A'
        },
        {
          name: '一般',
          img: require('@/assets/alarm-analysis/1.png'),
          value: 123,
          color: '#5C95F6'
        }
      ],
      option1: {
        title: [{
          text: '告警完成率',
          top: '10%',
          x: 'center',
          textStyle: {
            fontSize: 14,
            color: 'rgba(26, 26, 26, .5)'
          }
        },
        {
          text: '70%',
          x: 'center',
          top: '55%',
          textStyle: {
            fontSize: '22',
            color: '#29DCC9'
          }
        }],
        angleAxis: {
          show: false,
          max: 100, // -45度到225度，二者偏移值是270度除360度
          type: 'value',
          startAngle: 75, // 极坐标初始角度
          splitLine: {
            show: false
          }
        },
        barMaxWidth: 30, // 圆环宽度
        radiusAxis: {
          show: false,
          type: 'category'
        },
        // 圆环位置和大小
        polar: {
          center: ['50%', '60%'],
          radius: '105%'
        },
        series: [{
          type: 'bar',
          data: [{ // 上层圆环，显示数据
            value: 70,
            itemStyle: {
              color: '#45EFC8'
            }
          }],
          barGap: '-100%', // 柱间距离,上下两层圆环重合
          coordinateSystem: 'polar',
          roundCap: true, // 顶端圆角
          z: 3 // 圆环层级，同zindex
        },
        { // 下层圆环，显示最大值
          type: 'bar',
          data: [{
            value: 100,
            itemStyle: {
              color: '#EFF5F7',
              borderWidth: 0
            }
          }],
          barGap: '-100%',
          coordinateSystem: 'polar',
          roundCap: true,
          z: 1
        }

        ]
      },
      option2: {
        legend: {
          orient: 'vertical',
          right: 0,
          bottom: 0,
          itemWidth: 16,
          itemHeight: 16,
          textStyle: {
            color: 'rgba(26, 26, 26, .8)',
            fontSize: 14
          },
          data: [
            {
              name: '紧急告警',
              value: 10,
              itemStyle: {
                color: '#FFC1BF'
              }
            },
            {
              name: '重要告警',
              value: 10,
              itemStyle: {
                color: '#FFDB85'
              }
            },
            {
              name: '次要告警',
              value: 10,
              itemStyle: {
                color: '#45EFC8'
              }
            },
            {
              name: '提示告警',
              value: 10,
              itemStyle: {
                color: 'rgba(112, 168, 246, 1)'
              }
            }
          ]
        },
        series: [
          {
            type: 'pie',
            z: 3,
            center: ['30%', '60%'],
            radius: ['40%', '65%'],
            clockwise: true,
            avoidLabelOverlap: true,
            hoverOffset: 15,
            label: { show: false },
            data: [
              {
                name: '紧急告警',
                value: 10,
                itemStyle: {
                  color: '#FFC1BF'
                }
              },
              {
                name: '重要告警',
                value: 10,
                itemStyle: {
                  color: '#FFDB85'
                }
              },
              {
                name: '次要告警',
                value: 10,
                itemStyle: {
                  color: '#45EFC8'
                }
              },
              {
                name: '提示告警',
                value: 10,
                itemStyle: {
                  color: 'rgba(112, 168, 246, 1)'
                }
              }
            ]
          }
        ]
      },
      option3: {},
      option4: {
        color: ['#37a2da', '#32c5e9', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378ea'],
        calculable: true,
        series: [
          {
            name: '告警指标',
            type: 'pie',
            radius: [0, 130],
            roseType: 'area',
            label: {
              show: true,
              formatter: ({ data }) => {
                return data.name + '\n' + data.value + '%'
              }
            },
            data: [
              { value: 10, name: '信息内容安全' },
              { value: 5, name: '异常登陆' },
              { value: 15, name: '配置' },
              { value: 25, name: '漏洞' },
              { value: 20, name: '信息破坏' },
              { value: 35, name: '网络攻击' },
              { value: 30, name: '有害程度' }
            ]
          }
        ]
      },
      option5: {
        color: ['#37a2da', '#32c5e9', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378ea'],
        calculable: true,
        series: [
          {
            name: '告警指标',
            type: 'pie',
            radius: [0, 140],
            roseType: 'area',
            label: {
              show: true,
              formatter: ({ data }) => {
                return data.name + '\n' + data.value + '%'
              }
            },
            data: [
              { value: 10, name: '信息内容安全' },
              { value: 5, name: '异常登陆' },
              { value: 15, name: '配置' },
              { value: 25, name: '漏洞' },
              { value: 20, name: '信息破坏' },
              { value: 35, name: '网络攻击' },
              { value: 30, name: '有害程度' }
            ]
          }
        ]
      },
      tableData: [
        {}
      ],
      columns: [
        { prop: '告警ID', label: '告警ID', width: '', minWidth: '' },
        { prop: '告警模块', label: '告警模块', width: '', minWidth: '' },
        { prop: '告警指标', label: '告警指标', width: '', minWidth: '' },
        { prop: '告警级别', label: '告警级别', width: '', minWidth: '' },
        { prop: '产生时间', label: '产生时间', width: '', minWidth: '' },
        { prop: '清除时间', label: '清除时间', width: '', minWidth: '' },
        { prop: '清除方式', label: '清除方式', width: '', minWidth: '' },
        { prop: '位置信息', label: '位置信息', width: '', minWidth: '' },
        { prop: '可能原因', label: '可能原因', width: '', minWidth: '' },
        { prop: '其他', label: '其他', width: '', minWidth: '' }
      ]
    }
  }
}
</script>

<style lang="scss">
.alarm-analysis {
  .box-title {
    margin-bottom: 15px;
  }
  .box {
    border: 1px solid #ECF0F8;
  }
  .box2 {
    padding: 0 65px;
    .alarm-item {
      width: 100%;
    }
    .alarm-name {
      height: 19px;
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #1A1A1A;
      margin-left: 20px;
    }
    .alarm-value {
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      text-align: right;
    }
  }
  .icon-up {
    background-image: url("~@/assets/alarm-analysis/up.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 16px;
    height: 20px;
    margin-bottom: 6px;
  }
  .icon-down {
    background-image: url("~@/assets/alarm-analysis/down.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 16px;
    height: 20px;
  }
  .box1 {
    padding:23px 19px;
    .box-title {
      font-size: 20px;
      line-height: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #1A1A1A;
      margin-bottom: 22px;
    }
    .radar-chart-top {
      .radar-chart-top-title {
        font-size: 20px;
        line-height: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #1A1A1A;
        margin-bottom: 12px;
      }
      .radar-chart-top-title2 {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #1A1A1A;
        opacity: 0.8;
        margin-bottom: 5px;
      }
      .radar-chart-top-value__wrap {
        font-family: Microsoft YaHei;
        font-weight: 500;
        color: #5C95F6;
        .radar-chart-top-value {
          font-size: 30px;
          line-height: 24px;
        }
        .radar-chart-top-unit {
          display: inline-block;
          font-size: 18px;
          margin-top: 4px;
        }
      }
      .radar-chart-top__rate {
        width: 100%;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #1A1A1A;
        opacity: 0.8;
        margin-bottom: 5px;
        .radar-chart-top__rate-value {
          opacity: 1;
          margin-left: 10px;
          margin-right: 5px;
        }
      }
    }
    .radar-chart-bottom {
      flex-shrink: 0;
      padding-top: 20px;
      border-top: 2px dashed rgba(0, 82, 217, .5);
      font-size: 16px;
      line-height: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #1A1A1A;
      opacity: 0.8;
    }
  }
  .rank-item {
    .item-color {
      display: inline-block;
      width: 35px;
      height: 35px;
      border-radius: 50%;
      background-color: rgb(236, 240, 248);
      margin: 0px 15px;
      text-align: center;
      line-height: 35px;
      font-size: 18px;
    }
    .item-value {
      margin-left: 50px;
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ED2826;
    }
    .item-unit {
      margin-left: 3px;
      margin-top: 2px;
    }
  }
  .rank-left {
    .rank-item:nth-of-type(1) .item-color {
      color: #ffffff;
      background: linear-gradient(45deg, #FF7474, #FFC1BF);
    }
    .rank-item:nth-of-type(2) .item-color {
      color: #ffffff;
      background: linear-gradient(45deg, #29DCC9, #45EFC8);
    }
    .rank-item:nth-of-type(3) .item-color {
      color: #ffffff;
      background: linear-gradient(45deg, #70A8F6, #427DF6);
    }
  }
  .card1 {
    .el-card__body {
      padding: 45px !important;
    }
    .radar-chart-top__rate {
      padding-top: 20px;
      margin-top: 30px;
      border-top: 2px dashed rgba(0, 82, 217, .5);
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #1A1A1A;
      opacity: 0.8;
      margin-bottom: 10px;
      .radar-chart-top__rate-value {
        opacity: 1;
        margin-left: 10px;
        margin-right: 5px;
      }
      .el-image {
        width: 16px;
        height: 20px;
      }
    }

    .group_37 {
      padding: 4px 15px 4px 40px;
      height: 70px;
    }
    .text_15 {
      overflow-wrap: break-word;
      color: rgba(153, 153, 153, 1);
      font-size: 16px;
      font-family: MicrosoftYaHei;
      text-align: left;
      white-space: nowrap;
    }
    .text_16 {
      overflow-wrap: break-word;
      color: #333333;
      font-size: 30px;
      line-height: 30px;
      font-family: MicrosoftYaHei;
      text-align: left;
      white-space: nowrap;
    }
    .text_17 {
      line-height: 16px;
      overflow-wrap: break-word;
      color: rgba(153, 153, 153, 1);
      font-size: 16px;
      font-family: MicrosoftYaHei;
      text-align: left;
      white-space: nowrap;
      margin-bottom: 5px;
      margin-left: 4px;
    }
  }

}
</style>

